<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Meteora.Menu</title>

    <!-- Meteora -->
    <script src="../../src/meteora.js" type="text/javascript"></script>
    <!-- Meteora -->

    <link type="text/css" rel="stylesheet" href="../css/test.css" />
  </head>
  <body>
    <h1>Meteora.Menu</h1>

    <h3>Contextual menu</h3>
    <div id="test-1" class="test">Right click this area!</div>

    <h3>Vertical menu</h3>
    <div id="test-2" class="test"></div>
    
    <h3>Horizontal menu</h3>
    <div id="test-3" class="test"></div>

    <script type="text/javascript">

      Meteora.uses('menu');

      Meteora.onStart(
        function () {
          
          new ContextMenu(
            'test-1',
            [
              {
                'label': 'Send to',
                'items': [
                  {
                    'label': 'Documents',
                    'items': [
                      { 'label': 'Music' },
                      { 'label': 'Data' },
                      { 'label': 'Writings' },
                      { 'label': 'Videos' },
                      { 'label': 'Images' }
                    ]
                  },
                  {
                    'label': 'USB disk'
                  }
                ]
              },
              {
                'label': 'Properties...'
              }
            ]
          );
          
          new Menu(
            'test-2',
            [
              {
                'label': 'File',
                'onClick': function() {
                  alert('You have clicked on "File".');
                },
                'items': [
                  {
                    'label': 'New...'
                  },
                  {
                    'label': 'Open...'
                  },
                  {
                    'label': 'Print'
                  },
                ]
              },
              {
                'label': 'Edit',
                'items': [
                  {
                    'label': 'Preferences',
                    'onClick': function() {
                      alert('You have clicked on "Preferences"');
                    }
                  }
                ]
              },
              {
                'label': 'View',
                'items': [
                  {
                    'label': 'Toolbars',
                    'items': [
                      {
                        'label': 'Toolbar 1'
                      },
                      {
                        'label': 'Toolbar 2',
                        'items': [
                          {
                            'label': 'test'
                          },
                          {
                            'label': 'test',
                            'items': [
                              {
                                'label': 'test x'
                              }
                            ]
                          },
                          {
                            'label': 'test'
                          }
                        ]
                      }
                    ]
                  },
                  {
                    'label': 'Sidebar',
                    'items': [
                      {
                        'label': 'Foo'
                      }
                    ]
                  }
                ]
              }
            ]
          );

          new Menu(
            'test-3',
            [
              {
                'label': 'File',
                'onClick': function() {
                  alert('You have clicked on "File".');
                },
                'items': [
                  {
                    'label': 'New...'
                  },
                  {
                    'label': 'Open...'
                  },
                  {
                    'label': 'Print'
                  },
                ]
              },
              {
                'label': 'Edit',
                'items': [
                  {
                    'label': 'Preferences',
                    'onClick': function() {
                      alert('You have clicked on "Preferences"');
                    }
                  }
                ]
              },
              {
                'label': 'View',
                'items': [
                  {
                    'label': 'Toolbars',
                    'items': [
                      {
                        'label': 'Toolbar 1'
                      },
                      {
                        'label': 'Toolbar 2',
                        'items': [
                          {
                            'label': 'test'
                          },
                          {
                            'label': 'test',
                            'items': [
                              {
                                'label': 'test x'
                              }
                            ]
                          },
                          {
                            'label': 'test'
                          }
                        ]
                      }
                    ]
                  },
                  {
                    'label': 'Sidebar',
                    'items': [
                      {
                        'label': 'Foo'
                      }
                    ]
                  }
                ]
              }
            ],
            {
              'displayMode': 'horizontal'
            }
          );

        }
      );
    </script>
    
  </body>
</html>
